<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
		<meta charset="utf-8" />
		<title></title>
		 
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			#container{
				  
					width:100%;
					height:100vh;
			 
			}
			.test{
				width: 100%;
				height: 110vh;
				background: bisque;
			}
			#app{
				position: relative;
			}
			.gps-info{
				position: absolute;
				right: 10px;
				bottom: 10px;
				color: red;
				font-size: 10px;
			}
			.my-wz{
				position: absolute;
				left: 10px;
				bottom:15%;
				height: 40px;
				width: 40px;
				border-radius: 50%;
				box-shadow: 10px 10px 5px #888888;
			}
			.my-wz:active{
				box-shadow: 0px 0px 0px #ffffff;
			}
			.my-wz-img{
				width: 100%;
				height: 100%;
			}
		</style>
	</head>
	<body>
	<div id="app">
		<div id="container"class="test">

		</div>
		<div class="my-wz" @click="dingwei()">
			<img class="my-wz-img" src="/img/map/dianji.png"/>
		</div>
		<div class="gps-info">
			<div class="gps-item">速度：{{speed}}</div>
			<div class="gps-item">精度：{{accuracy}}</div>
		</div>
	</div>
	<script src="http://songbaoss.hbweiyinqing.cn/h5/jquery.min.js"></script>
	<script src="http://songbaoss.hbweiyinqing.cn/h5/vue.min.js"></script>
	<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=ACggOiEHE0u4YOxb2975xrc8iuh4vMfN"></script>
	<script type="text/javascript">



		var x_PI = 3.14159265358979324 * 3000.0 / 180.0;
		var PI = 3.1415926535897932384626;
		var a = 6378245.0;
		var ee = 0.00669342162296594323;


		/**
		 * 百度坐标系 (BD-09) 与 火星坐标系 (GCJ-02)的转换
		 * 即 百度 转 谷歌、高德
		 * @param bd_lon
		 * @param bd_lat
		 * @returns {*[]}
		 */
		function bd09togcj02(bd_lon, bd_lat) {
			var x_pi = 3.14159265358979324 * 3000.0 / 180.0;
			var x = bd_lon - 0.0065;
			var y = bd_lat - 0.006;
			var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
			var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
			var gg_lng = z * Math.cos(theta);
			var gg_lat = z * Math.sin(theta);
			return [gg_lng, gg_lat]
		}

		/**
		 * 火星坐标系 (GCJ-02) 与百度坐标系 (BD-09) 的转换
		 * 即谷歌、高德 转 百度
		 * @param lng
		 * @param lat
		 * @returns {*[]}
		 */
		function gcj02tobd09(lng, lat) {
			var z = Math.sqrt(lng * lng + lat * lat) + 0.00002 * Math.sin(lat * x_PI);
			var theta = Math.atan2(lat, lng) + 0.000003 * Math.cos(lng * x_PI);
			var bd_lng = z * Math.cos(theta) + 0.0065;
			var bd_lat = z * Math.sin(theta) + 0.006;
			return [bd_lng, bd_lat]
		}

		/**
		 * WGS84转GCj02
		 * @param lng
		 * @param lat
		 * @returns {*[]}
		 */
		function wgs84togcj02(lng, lat) {
			if (out_of_china(lng, lat)) {
				return [lng, lat]
			}
			else {
				var dlat = transformlat(lng - 105.0, lat - 35.0);
				var dlng = transformlng(lng - 105.0, lat - 35.0);
				var radlat = lat / 180.0 * PI;
				var magic = Math.sin(radlat);
				magic = 1 - ee * magic * magic;
				var sqrtmagic = Math.sqrt(magic);
				dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI);
				dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI);
				var mglat = lat + dlat;
				var mglng = lng + dlng;
				return [mglng, mglat]
			}
		}

		/**
		 * GCJ02 转换为 WGS84
		 * @param lng
		 * @param lat
		 * @returns {*[]}
		 */
		function gcj02towgs84(lng, lat) {
			if (out_of_china(lng, lat)) {
				return [lng, lat]
			}
			else {
				var dlat = transformlat(lng - 105.0, lat - 35.0);
				var dlng = transformlng(lng - 105.0, lat - 35.0);
				var radlat = lat / 180.0 * PI;
				var magic = Math.sin(radlat);
				magic = 1 - ee * magic * magic;
				var sqrtmagic = Math.sqrt(magic);
				dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI);
				dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI);
				mglat = lat + dlat;
				mglng = lng + dlng;
				return [lng * 2 - mglng, lat * 2 - mglat]
			}
		}

		function transformlat(lng, lat) {
			var ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng));
			ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0;
			ret += (20.0 * Math.sin(lat * PI) + 40.0 * Math.sin(lat / 3.0 * PI)) * 2.0 / 3.0;
			ret += (160.0 * Math.sin(lat / 12.0 * PI) + 320 * Math.sin(lat * PI / 30.0)) * 2.0 / 3.0;
			return ret
		}

		function transformlng(lng, lat) {
			var ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng));
			ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0;
			ret += (20.0 * Math.sin(lng * PI) + 40.0 * Math.sin(lng / 3.0 * PI)) * 2.0 / 3.0;
			ret += (150.0 * Math.sin(lng / 12.0 * PI) + 300.0 * Math.sin(lng / 30.0 * PI)) * 2.0 / 3.0;
			return ret
		}

		/**
		 * 判断是否在国内，不在国内则不做偏移
		 * @param lng
		 * @param lat
		 * @returns {boolean}
		 */
		function out_of_china(lng, lat) {
			return (lng < 72.004 || lng > 137.8347) || ((lat < 0.8293 || lat > 55.8271) || false);
		}



		var vm = new Vue({
			el: '#app',
			data: {
			 	mmap:{},
			 	host:'',
				myLoaction:{},
				speed:0,
				accuracy:0,
				point:{}
			},
			methods: {
				getGps(call){
					let _this = this
					wx.getLocation({
						type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
						success:  (res) =>{
							var n_lat = res.latitude; // 纬度，浮点数，范围为90 ~ -90
							var n_lon = res.longitude; // 经度，浮点数，范围为180 ~ -180。
							_this.speed = res.speed; // 速度，以米/每秒计
							_this.accuracy = res.accuracy; // 位置精度
							let gpsArray = gcj02tobd09(n_lon,n_lat)
							_this.point = new BMap.Point(gpsArray[0], gpsArray[1]);
							_this.mmap.removeOverlay(_this.myLoaction)

							var myIcon = new BMap.Icon("/img/map/my_wz.png", new BMap.Size(60, 60), {
								anchor: new BMap.Size(10, 25),
								imageOffset: new BMap.Size(0, 0)
							})

							_this.myLoaction =  new BMap.Marker(_this.point,{icon:myIcon});
							_this.mmap.addOverlay(_this.myLoaction);
							if(call){
								call()
							}
						},
						cancel: (res) => {
							_this.getGps()
						}
				});
				},
				getJsApi(){
					let _this = this
					$.ajax({
						type: 'post',
						url: _this.host+'/f/web/page/getJsApi',
						async: false,
						data:{
							url:window.location.href
						},
						success: function(data) {
							wx.config({
								debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
								appId: data.jsApi.weChatAppId, // 必填，公众号的唯一标识
								timestamp:  data.jsApi.timestamp, // 必填，生成签名的时间戳
								nonceStr:  data.jsApi.nonceStr, // 必填，生成签名的随机串
								signature:  data.jsApi.signature,// 必填，签名
								jsApiList: ['getLocation'] // 必填，需要使用的JS接口列表
							});
							wx.ready(function(){
								//_this.myWx = wx
								_this.getGps(function () {
									_this.mmap.panTo(_this.point);
								})
								setInterval(function () {
									_this.getGps()
								},3000)
							});
						}
					});
				},
				dingwei(){
					let _this = this
					_this.mmap.panTo(_this.point);
				}
			},
			created (){
				let _this = this
				_this.getJsApi()
			},
			mounted(){
				let _this = this
				var map = new BMap.Map("container",{
					minZoom:14,
					maxZoom:19,
					enableHighResolution:false,
					enableMapClick:false
				});
				map.enableScrollWheelZoom();
				var point = new BMap.Point(116.404, 39.915);
				// 创建点坐标
				map.centerAndZoom(point, 19);
				_this.mmap = map
			}
		})
	</script>  
	 
	</body>  
</html>
